<template>
  <el-dialog title="编辑楼层" :close-on-click-modal="false" append-to-body :visible.sync="visible" lock-scroll
    width="800px">
    <div class="topSty">
      <el-button icon="el-icon-refresh" size="mini" @click="bindDevice" type="primary" plain :disabled="multiple"
        v-hasPermi="['org:building:bind']">绑定设备及数量</el-button>
    </div>
    <el-table v-loading="loading" :data="floorList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="楼层数" align="center" prop="floor" />
      <el-table-column label="楼层别名" align="center" prop="floorAlias">
        <template slot-scope="scope">
          <el-input placeholder="请录入" @blur="updateFloorAlias(scope.row)" v-model="scope.row.floorAlias"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="已绑定设备数量" align="center" prop="count" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row.id)"
            v-hasPermi="['org:building:bind']">绑定设备及数量</el-button>
        </template>
      </el-table-column>
    </el-table>
    <devicesListPage v-if="devicesVisible" ref="devices" @refreshDev="refreshDev" :buildingId="dataForm.id"
      :floorIds="idList" />
  </el-dialog>
</template>
<script>
import { getBuildingFloorList, getDeviceTree, updateBuildFloor } from "@/api/system/building";
import devicesListPage from "./devicesList.vue";

export default {
  components: { devicesListPage },

  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids1: [],
      floorList: [],
      dataForm: {},
      devicesVisible: false,
      idList: []
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          getBuildingFloorList(id).then((res) => {
            this.floorList = res.data;
            this.loading = false;
          });
        }
      });
    },
    bindDevice() {
      this.devicesVisible = true;
      this.idList = [...this.ids]
      this.$nextTick(() => {
        this.$refs.devices.init();
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 单独点击
    handleUpdate(id) {
      this.devicesVisible = true;
      this.idList = [id]
      this.$nextTick(() => {
        this.$refs.devices.init();
      });
    },
    // 刷新页面
    refreshDev(isrRefresh) {
      this.devicesVisible = false;
      if (isrRefresh) {
        this.loading = true;
        getBuildingFloorList(this.dataForm.id).then((res) => {
          this.floorList = res.data;
          this.loading = false;
        });
      }
    },
    //修改楼层别名 
    updateFloorAlias(row) {
      let dataInfo = [{
        floor: row.floor,
        floorAlias: row.floorAlias,
        id: row.id
      }]
      updateBuildFloor(dataInfo).then(res => {
        this.refreshDev(true)
      })

    }
  },
};
</script>
<style lang="scss" scoped>
.topSty {
  width: 98%;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
